<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link href="erp/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="erp/css/style.css"/>
    <link rel="stylesheet" href="erp/assets/css/ace.min.css"/>
    <link rel="stylesheet" href="erp/assets/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="erp/Widget/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link href="erp/Widget/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <!--[if IE 7]>
    <link rel="stylesheet" href="erp/assets/css/font-awesome-ie7.min.css"/>
    <![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="erp/assets/css/ace-ie.min.css"/>
    <![endif]-->
    <script src="erp/js/jquery-1.9.1.min.js"></script>
    <script src="erp/assets/js/bootstrap.min.js"></script>
    <script src="erp/assets/js/typeahead-bs2.min.js"></script>
    <!-- page specific plugin scripts -->
    <script src="erp/assets/js/jquery.dataTables.min.js"></script>
    <script src="erp/assets/js/jquery.dataTables.bootstrap.js"></script>
    <script src="erp/assets/layer/layer.js" type="text/javascript"></script>
    <script src="erp/assets/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="erp/Widget/zTree/js/jquery.ztree.all-3.5.min.js"></script>
    <script src="erp/js/lrtk.js" type="text/javascript"></script>
    <title>产品生产过程查询</title>
</head>
<body>

<div>
    <div id="brand_style">
        <div class="search_style">
            <form>
                <ul class="search_content clearfix">
                    <li><label class="l_f">订单编号</label>
                        <input name="no" type="text" class="text_add" placeholder="输入订单编号" id="sub"/>
                    </li>
                    <li style="width:90px;">
                        <button type="button" class="cha_x btn_search" id="search">查询</button>
                    </li>
                </ul>
            </form>
        </div>
        <div id="hide_tab" style="visibility:hidden">
            <table class="table table-striped table-bordered table-hover" id="example" align="center" style="width: 100%;">
                <thead>
                <tr>
                    <th width="50px">序号</th>
                    <th width="200px">产品名称</th>
                    <th width="200">订单编号</th>
                    <th width="200px">生产数量</th>
                    <th width="180px">下单时间</th>
                    <th width="200px">负责人</th>
                    <th width="280px">电话号码</th>
                    <th width="180px">订单状态</th>
                    <th width="180px">生产状态</th>
                    <th width="180px">操作</th>
                </tr>
                </thead>
                <tbody id = "t_body">
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="add_menber" id="add_menber_style" style="display:none;">
    <div class="clearfix">
        <div style="width: 100%">
            <table   class="table table-striped table-bordered table-hover cha_k_hide" align="center" style="text-align: center;font-size: 15px;margin: 20px auto;">
                <thead>
                <tr>
                    <th style="text-align: center;" width="200">时间</th>
                    <th style="text-align: center;" width="500">生产进度</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>2016-11-20 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【下单成功】</td>
                </tr>
                <tr>
                    <td>2016-11-21 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已确认】</td>
                </tr>
                <tr>
                    <td>2016-11-22 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已生产】</td>
                </tr>
                <tr>
                    <td>2016-11-26 08:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已入库】</td>
                </tr>
                <tr>
                    <td>2016-11-26 12:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已出库】</td>
                </tr>
                <tr>
                    <td>2016-11-26 14:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已签收】<a href="javascript:;" class="cha_k" style="text-decoration: none;color:blue">查看物流</a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>
<script>
    jQuery(function ($) {
        $(document).ready(function(){
         //   $("#hide_tab").hide();
        });

        $(".cha_k").on('click',function(){
            $(".cha_k_hide").show();
        });
        $(".cha_x").on('click', function () {
            $("#hide_tab").css({
                visibility:"visible"
            });
        });
        $(document).ready(function () {
            //初始化宽度、高度
            $(".widget-box").height($(window).height());
            $(".page_right_style").height($(window).height());
            $(".page_right_style").width($(window).width() - 220);
        });
        //当文档窗口发生改变时 触发
        $(window).resize(function(){

            $(".widget-box").height($(window).height());
            $(".page_right_style").height($(window).height());
            $(".page_right_style").width($(window).width()-220);
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        var table = $('#example').DataTable({
            language: {
                "processing":   "处理中...",
                "lengthMenu":   "_MENU_ 记录/页",
                "zeroRecords":  "没有匹配的记录",
                "bLengthChange" : true, // 每行显示记录数

                "info":         "第 _START_ 至 _END_ 项记录，共 _TOTAL_ 项",
                "infoEmpty":    "第 0 至 0 项记录，共 0 项",
                "infoFiltered": "(由 _MAX_ 项记录过滤)",
                "thousands": ".",
                "emptyTable":"未找到符合条件的数据",
                "paginate": {
                    "first":    "首页",
                    "previous": "上页",
                    "next":     "下页",
                    "last":     "末页"
                }
            },
            "bLengthChange" : true,// 每行显示记录数
            searching : false,
            serverSide: true,   //开始服务器分页
            aoColumnDefs: [
                {"orderable": false, "aTargets": [0, 1, 2, 3, 4, 5]}// 制定列不参与排序
            ],
            ajax: {
                url : '/productive/list',
                type : 'post',
                data : function (d) {
                    var data = $('form').serialize();   //获取查询条件

                    //获取分页信息
                    var searchParams= {
                        start : d.start/10,
                        length : d.length,
                    };
                    data = data + '&' + $.param(searchParams);
                    return data;
                }
            },
            columnDefs: [{"defaultContent": "",
                "targets": "_all"}],
            columns : [
                { "data": "index" ,'sDefaultContent': ''},
                { "data": "p_name" ,'sDefaultContent': ''},
                { "data": "order_id", 'sDefaultContent': ''},
                { "data": "number",'sDefaultContent': '' },
                { "data": "deal_time",'sDefaultContent': '' },
                { "data": "operator",'sDefaultContent': '' },
                { "data": "user_tel",'sDefaultContent': '' },
                { "data": "order_status",'sDefaultContent': '', "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).empty().append('<i style="display: inline-block;color:#fff;width: 50px;height: 20px;background-color:'+rowData.orderColor+';line-height: 20px; ">'+cellData+'</i>');
                    }
                },
                { "data": "product_status",'sDefaultContent': '', "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).empty().append('<i style="display: inline-block;color:#fff;width: 50px;height: 20px;background-color:'+rowData.productColor+';line-height: 20px; ">'+cellData+'</i>');
                    }
                },
                { "data": "order_id",'sDefaultContent': '', "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).empty().append('<a style="text-decoration:none" onclick="aaa(\''+cellData+'\')" class="chen_g btn btn-xs btn-success" href="javascript:;" title="详情"><i class="icon-list bigger-120"></i></a>');
                    }
                }
            ]
        });
        //搜索按钮事件
        $('#search').click(function () {
            table.ajax.reload();
        })
    })
    function aaa(a){
        console.log(a);
        layer.open({
            type: 1,
            title: '详情',
            shadeClose: true, //点击遮罩关闭层
            area: ['900px', ''],
            content: $('#add_menber_style'),
            btn: ['返回'],
            yes: function (index, layero) {
                layer.close(index);
            }
        });
        $.ajax({
            url : "/productive/status",
            data : {
                no : a
            },
            dataType : "json",
            contentType : "application/json",
            success : function (da) {
                if(da.rs){
                    var d = da.data;
                    $("#add_menber_style table").find("tr:not(:eq(0))").remove();
                    for(var i in d){
                        $("#add_menber_style table").append("<tr><td>" + d[i].time
                            +"</td><td>" + d[i].company_province + d[i].company_city + d[i].company_address
                            +"【"+d[i].legal + "】" +
                            "<i style='display: inline-block;width: 40px'></i>【" +d[i].status
                            +"】</td></tr>")
                    }
                }else{
                    layer.msg("获取状态出错", {icon: 2, time: 2000});
                }

            }
        })
    }
</script>
